<template>
  <div class="container">
    <div class="analyze-main-content">
      <div class="ll-main-content-title">
        <div class="title-left">
          <img class="omit-icon" src="../../../assets/imgs/analyze-omit-icon.png" alt="">
          <span class="omit-text">遗漏分析</span>
        </div>
        <div class="title-right">
          <span class="query-area-input-outbox">统计
            <input v-model="queryNum" type="text" placeholder="30" class="query-area-input my_text_center">&nbsp;期</span>
          <button class="query-area-btn" @click="llQueryData">查询</button>
        </div>
      </div>
      <div class="omit-table-area-intro">
        <p>说明：遗漏与长龙是相反的一对属性。连续遗漏N期，指一段时间内，某形态（大、小、单、双、龙、虎）连续N期未出现；遗漏大数据统计号码 大小、单双、龙虎“连续遗漏N期”的出现次数。</p>
      </div>
      <div class="omit-table-area-table">
        <div class="table-tabs-outerbox">
          <span class="table-tabs-item my_text_center" v-for="(item,index) in omitBallNumTabListsVar" :key="index" :class="{active:item.status}" @click="changeOmitBallNum(index)">{{item.group}}</span>
        </div>
        <table>
          <thead>
            <tr class="omit-table-thead-one-tr">
              <td colspan="2" v-for="(item,index) in omitTheadOneRowArr" :key="index">{{item}}</td>
            </tr>
            <tr class="omit-table-thead-two-tr">
              <td v-for="(item,index) in omitTheadTwoRowArr" :key="index">{{item}}</td>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item,index) in omitTbodyListsVar" :key="index">
              <td v-for="(e,i) in item" :key="i">{{e}}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      queryNum: 30,
      omitTheadListsVar: {},
      omitTbodyListsVar: [],
      omitBallNumTabListsVar: [],
      omitTheadOneRowArr: [],
      omitTheadTwoRowArr: []
    };
  },
  mounted() {
    this.axios
      .get("analyse/getObtainOmissionAnalysis", {
        params: { lottery_id: this.$route.params.caizhongID }
      })
      .then(res => {
        if (res.data.status) {
          this.omitBallNumTabListsVar = res.data.data;
          this.omitTheadListsVar = this.omitBallNumTabListsVar[0].title;
          this.omitTbodyListsVar = this.omitBallNumTabListsVar[0].data;
          this.omitTheadListsVar.forEach(el => {
            this.omitTheadOneRowArr.push(el.label);
            el.type.forEach(el => {
              this.omitTheadTwoRowArr.push(el);
            });
          });
        } else {
          this.log(res.data.message);
        }
      })
      .catch(err => {
        this.log(err);
      });
  },
  methods: {
    llQueryData() {
      if(this.queryNum>200){
        this.queryNum = 200;
      }
      this.axios
        .get("analyse/getObtainOmissionAnalysis", {
          params: {
            lottery_id: this.$route.params.caizhongID,
            limit: this.queryNum
          }
        })
        .then(res => {
          if (res.data.status) {
            this.omitTheadOneRowArr = [];
            this.omitTheadTwoRowArr = [];
            this.omitBallNumTabListsVar = res.data.data;
            this.omitTheadListsVar = this.omitBallNumTabListsVar[0].title;
            this.omitTbodyListsVar = this.omitBallNumTabListsVar[0].data;
            this.omitTheadListsVar.forEach(el => {
              this.omitTheadOneRowArr.push(el.label);
              el.type.forEach(el => {
                this.omitTheadTwoRowArr.push(el);
              });
            });
          } else {
            this.log(res.data.message);
          }
        })
        .catch(err => {
          this.log(err);
        });
    },
    changeOmitBallNum(index) {
      this.omitBallNumTabListsVar.forEach((el, i, item) => {
        if (index == i) {
          el.status = 1;
        } else {
          el.status = 0;
        }
      });
      this.omitTheadOneRowArr = [];
      this.omitTheadTwoRowArr = [];
      this.omitTheadListsVar = this.omitBallNumTabListsVar[index].title;
      this.omitTheadListsVar.forEach(el => {
        this.omitTheadOneRowArr.push(el.label);
        el.type.forEach(el => {
          this.omitTheadTwoRowArr.push(el);
        });
      });
      this.omitTbodyListsVar = this.omitBallNumTabListsVar[index].data;
    }
  }
};
</script>

<style lang="less" scoped>
@import url(../../../assets/css/analyzeomit.less);
</style>


